<template>
  <view @click="onClick" :style="{width,height}" style="justify-content: center;">
    <image v-if="cSrc" :style="{width,height}" style="border-radius: 10rpx;" :src="cSrc" :mode="mode"></image>
  </view>
</template>

<script>
  /**
   * cloud-image 
   * @description 兼容普通资源和unicloud图片资源渲染的组件
   * @property {String} mode	图片裁剪、缩放的模式。默认为widthFix，支持所有image组件的mode值
   * @property {String} src	资源完了链接或uniCloud云存储资源的fileid
   * @property {String} width	图片的宽，默认为：100rpx
   * @property {String} height	图片的高，默认为：100rpx
   * @event {Function} click 点击 cloud-image 触发事件
   */
  export default {
    name: "cloud-image",
    emits: ['click'],
    props: {
      mode: {
        type: String,
        default () {
          return 'widthFix'
        }
      },
      src: {
        // type:String,
        default () {
          return ""
        }
      },
      width: {
        type: String,
        default () {
          return '100rpx'
        }
      },
      height: {
        type: String,
        default () {
          return '100rpx'
        }
      }
    },
    watch: {
      src: {
        handler(src) {
          if (src && src.substring(0, 8) == "cloud://") {
            uniCloud.getTempFileURL({
              fileList: [src]
            }).then(res => {
              this.cSrc = res.fileList[0].tempFileURL
            })
          } else {
            this.cSrc = src
          }
        },
        immediate: true
      }
    },
    methods: {
      onClick() {
        this.$emit('click')
      }
    },
    data() {
      return {
        cSrc: false
      };
    }
  }
</script>